<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template>
  <div class="smart-home-container">
    <!-- 顶部导航区域 -->
    <header class="header">
      <div class="header-content">
        <img src="../../assets/返回1.svg" alt="返回" class="back-image" style="width: 20px; height: 20px;"
          @click="handleBack">
        <h1 class="title">客厅</h1>
        <div class="time-weather">
          <span class="time">{{ currentTime }}</span>
          <span class="weather">{{ weatherInfo }}</span>
        </div>
      </div>
    </header>
    <!-- 场景模式选择 -->
    <section class="scene-section">
      <h2 class="section-title">场景模式</h2>
      <div class="scene-container">
        <div v-for="(scene, index) in scenes" :key="index" class="scene-card" :class="{ active: activeScene === index }"
          @click="switchScene(index)">
          <i :class="scene.icon" class="scene-icon"></i>
          <span class="scene-name">{{ scene.name }}</span>
        </div>
      </div>
    </section>
    <!-- 设备控制区域 -->
    <section class="device-section">
      <h2 class="section-title">设备控制</h2>
      <div class="device-grid">
        <!-- 灯光控制 -->
        <div class="device-card">
          <div class="device-header">
            <img src="../../assets/icons/灯.svg" alt="灯" class="icon" style="height: 40px;width: 40px;">
            <h3 class="device-title">灯光控制</h3>
            <div class="switch" :class="{ on: lightStatus }" @click="toggleLight">
              <div class="switch-handle"></div>
            </div>
          </div>
          <div class="device-body">
            <div class="slider-container">
              <label>亮度调节</label>
              <input type="range" min="0" max="100" v-model="lightBrightness" class="brightness-slider"
                :disabled="!lightStatus">
              <span class="brightness-value">{{ lightBrightness }}%</span>
            </div>
          </div>
        </div>
        <!-- 空调控制 -->
        <div class="device-card">
          <div class="device-header">
            <img src="../../assets/icons/雪花-04.svg" alt="空调" class="icon" style="height: 40px;width: 40px;">
            <h3 class="device-title">空调控制</h3>
            <div class="switch" :class="{ on: acStatus }" @click="toggleAC">
              <div class="switch-handle"></div>
            </div>
          </div>
          <div class="device-body">
            <div class="temp-control">
              <div class="temp-display">
                <span class="temp-value">{{ currentTemp }}°C</span>
                <span class="temp-mode">{{ acMode }}</span>
              </div>
              <div class="temp-buttons">
                <button @click="adjustTemp('down')" :disabled="!acStatus">
                  <i class="fas fa-minus"></i>
                </button>
                <button @click="adjustTemp('up')" :disabled="!acStatus">
                  <i class="fas fa-plus"></i>
                </button>
              </div>
            </div>
            <div class="mode-buttons">
              <button v-for="(mode, index) in acModes" :key="index" :class="{ active: acMode === mode }"
                @click="changeACMode(mode)" :disabled="!acStatus">
                {{ mode }}
              </button>
            </div>
          </div>
        </div>
        <!-- 电视控制 -->
        <div class="device-card">
          <div class="device-header">
            <img src="../../assets/icons/电视机.svg" alt="电视机" class="icon" style="height: 40px;width: 40px;">
            <h3 class="device-title">电视控制</h3>
            <div class="switch" :class="{ on: tvStatus }" @click="toggleTV">
              <div class="switch-handle"></div>
            </div>
          </div>
          <div class="device-body">
            <div class="slider-container">
              <label>音量调节</label>
              <input type="range" min="0" max="100" v-model="tvVolume" class="volume-slider" :disabled="!tvStatus">
              <span class="volume-value">{{ tvVolume }}%</span>
            </div>
            <div class="source-buttons">
              <button v-for="(source, index) in tvSources" :key="index" :class="{ active: tvSource === source }"
                @click="changeTVSource(source)" :disabled="!tvStatus">
                {{ source }}
              </button>
            </div>
          </div>
        </div>
        <!-- 音响控制 -->
        <div class="device-card">
          <div class="device-header">
            <img src="../../assets/icons/音乐.svg" alt="音响" class="icon" style="height: 40px;width: 40px;">
            <h3 class="device-title">音响控制</h3>
            <div class="switch" :class="{ on: speakerStatus }" @click="toggleSpeaker">
              <div class="switch-handle"></div>
            </div>
          </div>
          <div class="device-body">
            <div class="slider-container">
              <label>音量调节</label>
              <input type="range" min="0" max="100" v-model="speakerVolume" class="volume-slider"
                :disabled="!speakerStatus">
              <span class="volume-value">{{ speakerVolume }}%</span>
            </div>
            <div class="player-controls">
              <button @click="prevTrack" :disabled="!speakerStatus">
                <img src="../../assets/左.svg" class="icon" style="height: 25px;width: 25px;">
              </button>
              <button @click="togglePlay" :disabled="!speakerStatus">
                <img src="../../assets/播放.svg" class="icon" style="height: 25px;width: 25px;">
              </button>
              <button @click="nextTrack" :disabled="!speakerStatus">
                <img src="../../assets/右.svg" class="icon" style="height: 25px;width: 25px;">
              </button>
            </div>
            <div class="sound-modes">
              <button v-for="(mode, index) in soundModes" :key="index" :class="{ active: soundMode === mode }"
                @click="changeSoundMode(mode)" :disabled="!speakerStatus">
                {{ mode }}
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue';
// 当前时间
const currentTime = ref('');
import { useRouter } from 'vue-router';
const router = useRouter();
const handleBack = () => {
  router.push({ name: 'Home' });
};
const updateTime = () => {
  const now = new Date();
  currentTime.value = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`;
};


// 天气信息
const weatherInfo = ref('晴 26°C');
// 场景模式
const scenes = ref([
  { name: '日常', icon: 'home' },
  { name: '影院', icon: 'fas fa-film' },
  { name: '会客', icon: 'fas fa-users' },
  { name: '睡眠', icon: 'fas fa-moon' },
  { name: '阅读', icon: 'fas fa-book' },
  { name: '离家', icon: 'fas fa-door-open' }
]);
const activeScene = ref(0);
// 灯光控制
const lightStatus = ref(true);
const lightBrightness = ref(80);
// 空调控制
const acStatus = ref(true);
const currentTemp = ref(24);
const acMode = ref('制冷');
const acModes = ref(['制冷', '制热', '除湿', '自动']);
// 电视控制
const tvStatus = ref(false);
const tvVolume = ref(50);
const tvSource = ref('HDMI1');
const tvSources = ref(['HDMI1', 'HDMI2', 'TV', 'USB']);
// 音响控制
const speakerStatus = ref(true);
const speakerVolume = ref(60);
const isPlaying = ref(true);
const soundMode = ref('标准');
const soundModes = ref(['标准', '影院', '音乐', '新闻']);


// 切换场景
const switchScene = (index: number) => {
  activeScene.value = index;
  // 根据场景设置设备状态
  switch (index) {
    case 0: // 日常
      lightStatus.value = true;
      lightBrightness.value = 80;
      acStatus.value = true;
      currentTemp.value = 24;
      acMode.value = '制冷';
      tvStatus.value = false;
      speakerStatus.value = true;
      speakerVolume.value = 40;
      break;
    case 1: // 影院
      lightStatus.value = true;
      lightBrightness.value = 30;
      acStatus.value = true;
      currentTemp.value = 22;
      acMode.value = '制冷';
      tvStatus.value = true;
      tvVolume.value = 70;
      speakerStatus.value = true;
      speakerVolume.value = 65;
      break;
    case 2: // 会客
      lightStatus.value = true;
      lightBrightness.value = 100;
      acStatus.value = true;
      currentTemp.value = 25;
      acMode.value = '自动';
      tvStatus.value = false;
      speakerStatus.value = true;
      speakerVolume.value = 50;
      break;
    case 3: // 睡眠
      lightStatus.value = false;
      acStatus.value = true;
      currentTemp.value = 26;
      acMode.value = '制冷';
      tvStatus.value = false;
      speakerStatus.value = false;
      break;
  }
};
// 灯光控制
const toggleLight = () => {
  lightStatus.value = !lightStatus.value;
};
// 空调控制
const toggleAC = () => {
  acStatus.value = !acStatus.value;
};
const adjustTemp = (direction: string) => {
  if (direction === 'up') {
    currentTemp.value++;
  } else {
    currentTemp.value--;
  }
};
const changeACMode = (mode: string) => {
  acMode.value = mode;
};
// 电视控制
const toggleTV = () => {
  tvStatus.value = !tvStatus.value;
};
const changeTVSource = (source: string) => {
  tvSource.value = source;
};
// 音响控制
const toggleSpeaker = () => {
  speakerStatus.value = !speakerStatus.value;
};
const togglePlay = () => {
  isPlaying.value = !isPlaying.value;
};
const prevTrack = () => {
  // 上一曲逻辑
};
const nextTrack = () => {
  // 下一曲逻辑
};
const changeSoundMode = (mode: string) => {
  soundMode.value = mode;
};
// 初始化
onMounted(() => {
  updateTime();
  setInterval(updateTime, 60000);
});
</script>


<style>
@import '../../assets/css/LivingRoom.css'
</style>